import { Component, OnInit } from '@angular/core';
import { JsonApiService } from "../core/api/json-api.service";
import { Router } from "@angular/router";

declare var echarts: any;
@Component({
	selector: 'app-home',
	templateUrl: './home.component.html',
	styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
	onlineNum: number = 0; //在线车辆
	offlineNum: number = 0; //离线车辆
	totalNum: number = 0; //总车辆
	onlineRate: string = ''; //在线率
	chartTimer: any; //流量统计图定时器
	//	flowIpNum=[];//流量统计图的服务器
	//流量折线图参数
	totalInNum = '0'; //实时总进站数
	totalOutNum = '0'; //实时总出站数
	timeTypeAPI: string = '0'; //API统计类型
	timeRangeAPI: number = 10; //API查询时间段,默认十条数据
	timeTypeUser: string = '0'; //用户统计类型
	timeRangeUser: number = 10; //流量查询时间段,默认十条数据
	timeTypeFlow: string = '0'; //流量统计
	timeRangeFlow: number = 10; //流量查询时间段,默认十条数据
	btnData: any[] = [];
	trafficHome: boolean = false;
	onlineHome: boolean = false;
	apiHome: boolean = false;
	baseDataHome: boolean = false;
	welcomeHome: boolean = false;
	sensor: any = {
		total: '',
		normal: '',
		unnormal: ''
	};
	baseData: any = {
		totalWeight: {},
		totalDistance: {},
		totalCount: {},
		api0: {},
		api1: {},
		api2: {},
		totalData: {},
		weight: [],
		registCount:{},
		viewCount:{}
	}
	constructor(private jsonApiService: JsonApiService, private router: Router) {}

	//车辆在线-饼图参数配置
	createOnlineForCarConfig() {
		var option = {
			// title: {
			// 	text: (this.onlineNum * 100 / this.totalNum).toFixed(2) + "%",
			// 	subtext: '在线率',
			// 	x: 'center',
			// 	y: 'center',
			// 	textStyle: {
			// 		color: "#69aa46",
			// 		fontSize: 24,
			// 		fontWeight: 'normal'
			// 	},
			// 	subtextStyle: {
			// 		color: "#333",
			// 		fontSize: 14,
			// 		fontWeight: 'normal'
			// 	}
			// },
			calculable: true,
			series: [{
					name: '面积模式',
					type: 'pie',
					radius: '50%',
					center: ['50%', '50%'],
					data: [{
							value: this.onlineNum,
							// name: '在线',
							itemStyle: {
								color: '#69aa46'
							},
							label: {
								color: "transparent",
								fontSize: 14,
								formatter: '{a|在线' + this.onlineNum + '辆}',
								// rich: {
								// 	a: {
								// 		color: "#69aa46",
								// 		fontSize: 14,
								// 		lineHeight: 24,
								// 		padding: [0, 6],
								// 	}
								// },
								position: 'inner',
							}
						},
						{
							value: this.offlineNum,
							// name: 'rose2',
							itemStyle: {
								color: "transparent"
							}
						}
					]
				},
				{
					name: '面积模式',
					type: 'pie',
					radius: '50%',
					center: ['50%', '50%'],
					data: [{
							value: this.onlineNum,
							// name: '离线',
							itemStyle: {
								color: "transparent"
							}
						},
						{
							value: this.offlineNum,
							// name: 'rose2',
							itemStyle: {
								color: '#ccc'
							},
							label: {
								color: "transparent",
								fontSize: 14,
								formatter: '{a|离线' + this.offlineNum + '辆}',
								// rich: {
								// 	a: {
								// 		color: "#777",
								// 		fontSize: 14,
								// 		lineHeight: 24,
								// 		padding: [0, 6],
								// 	},
								// },
								position: 'inner',
							}
						}
					]
				}
			],
			grid: {
                top: 10,
				right: 10,
				bottom: 10,
                left: 10,
            },
		};
		return option;
	}

	initOnline() {
		//创建绘图
		var chart = echarts.init(document.getElementById("onlinePie"));
		this.jsonApiService.http('mainstat/online.html', null).subscribe((result) => {
			var carData = result.data.split(",");
			this.onlineNum = +carData[0]; //在线车辆
			this.offlineNum = +carData[1]; //离线车辆
			this.totalNum = +carData[0] + +carData[1]; //总车辆
			this.onlineRate = (this.onlineNum * 100 / this.totalNum).toFixed(2) + "%";
			var option = this.createOnlineForCarConfig();
			chart.setOption(option);
			$(window).resize(chart.resize);
		})

	}

	initCarMap() {
		//创建绘图
		var carmapChart = echarts.init(document.getElementById("carmap"));
		var option2 = this.createCarMapConfig();
		carmapChart.setOption(option2);
		$(window).resize(carmapChart.resize);
		this.jsonApiService.http('mainstat/carmap.html', null).subscribe((result) => {
			var carData = this.convertData(result.carmap);
			carmapChart.setOption({
				series: [{
					data: carData,

				}]
			});
		})
	}
	convertData(data) {
		var res = [];
		for(var i = 0; i < data.length; i++) {
			var geoCoordMap = this.getGeoCoordMap();
			var geoCoord = geoCoordMap[data[i].name];
			if(geoCoord) {
				res.push({
					name: data[i].name,
					value: geoCoord.concat(data[i].value)
				});
			}
		}
		return res;
	};
	createCarMapConfig() {
		//地图车辆统计
		var option = {
			backgroundColor: 'transparent',
			title: {
				text: '',
				x: 24,
				top: 12,
				textStyle: {
					fontSize: 14,
					fontWeight: 'bold'
				}
			},
			tooltip: {
				trigger: 'item',
				formatter: function(params) {
					return params.name + ' : ' + params.value[2] + ' 辆';
				}
			},
			geo: {
				map: 'china',
				roam: true,
				zoom: 1.2,
				label: {
					normal: {
						show: true,
						textStyle: {
							color: '#333'
						}
					}
				},
				itemStyle: {
					normal: {
						borderColor: '#666'
					}
				},
				emphasis: {
					itemStyle: {
						color: '#eeeeee'
					}
				}
			},
			series: [{
				name: '车辆',
				type: 'effectScatter',
				coordinateSystem: 'geo',
				symbolSize: 12,
				legendHoverLink: false,
				label: {
					normal: {
						show: false
					},
					emphasis: {
						show: false
					}
				},
				itemStyle: {
					normal: {
						color: '#408df5',
						shadowBlur: 5,
						shadowColor: '#a3c3f9'
					}
				}
			}]
		}
		return option;
	}
	getGeoCoordMap() {
		var geoCoordMap = {
			"北京": [116.39737, 39.939502],
			"天津": [117.133262, 39.256321],
			"上海": [121.36464, 31.303465],
			"重庆": [106.32485, 29.895013],
			"河北": [114.336873, 38.21885],
			"山西": [112.349964, 38.044464],
			"辽宁": [123.241164, 41.948112],
			"吉林": [125.228072, 43.894927],
			"黑龙江": [126.479088, 45.985284],
			"江苏": [118.775429, 32.046466],
			"浙江": [120.040035, 30.350837],
			"安徽": [117.170056, 31.99595],
			"福建": [119.156964, 26.182279],
			"江西": [115.808656, 28.774611],
			"山东": [116.912494, 36.812038],
			"河南": [113.453802, 34.895028],
			"湖北": [114.116105, 30.764814],
			"湖南": [112.800698, 28.474291],
			"广东": [113.233035, 23.224606],
			"海南": [110.179083, 19.921006],
			"四川": [103.924003, 30.796585],
			"贵州": [106.499624, 26.844365],
			"云南": [102.599397, 25.248948],
			"陕西": [108.780889, 34.408508],
			"甘肃": [103.66644, 36.218003],
			"青海": [101.605943, 36.752842],
			"西藏自治区": [90.972306, 29.838888],
			"广西壮族自治区": [108.265765, 23.020403],
			"内蒙古自治区": [111.614073, 40.951504],
			"宁夏回族自治区": [106.094884, 38.624116],
			"新疆维吾尔自治区": [87.476819, 43.894927],
			"香港特别行政区": [114.1529, 22.542716],
			"澳门特别行政区": [113.417008, 22.337477],
			"台湾": [121.36464, 25.248948]
		};
		return geoCoordMap;
	}

	//获得流量单位,B,KB,MB,GB
	getFlowunit(value) {
		var result = '0 B';
		if(value < 1024) {
			result = value + 'B';
		}
		if(value >= 1024 && value < 1024 * 1024) {
			//单位kb
			value = common.twoDecimal(value / 1024);
			result = value + 'KB';
		}
		if(value >= 1024 * 1024 && value < 1024 * 1024 * 1024) {
			//单位Mb
			value = common.twoDecimal(value / 1024 / 1024);
			result = value + 'MB';
		}
		if(value >= 1024 * 1024 * 1024) {
			//单位GB
			value = common.twoDecimal(value / 1024 / 1024 / 1024);
			result = value + 'GB';
		}

		return result;
	}
	showFlowChartView() {
		var yAxiWeight: any = {
			show: true,
			name: '在线数',
			type: 'value',
			position: 'left',
			axisLine: {
				lineStyle: {
					color: 'gray'
				}
			},
			axisLabel: {
				formatter: '{value} '
			}
		}
		var flowChart = echarts.init(document.getElementById("flowChart"));
		var options = null;
		var allIpArr = []; //所有的服务器数,例如服务器1,服务器2,
		var filData = {
			linkNum: {
				name: '在线数',
				data: [],
				rowData: []
			},
			currentInBytes: {
				name: '当前进站',
				data: [],
				rowData: []
			},
			currentOutBytes: {
				name: '当前出站',
				data: [],
				rowData: []
			},
		}
		var xAxisArr = []; //X时间轴
		options = {
			title: {},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross' //十字星	
				},
				formatter: function(params) {}
			},
			//				legend: {
			//					top:'18'
			//				},
			grid: {
				top: '12',
				left: '22',
				right: '32',
				bottom: '22',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: [],
			},
			yAxis: [yAxiWeight],
			series: []
		};
		flowChart.setOption(options, true);
		$(window).resize(flowChart.resize);
	}
	initFlowChart() {
		var yAxiWeight: any = {
			show: true,
			name: '在线数',
			type: 'value',
			position: 'left',
			axisLine: {
				lineStyle: {
					color: 'gray'
				}
			},
			axisLabel: {
				formatter: '{value} '
			}
		}
		var flowChart = echarts.init(document.getElementById("flowChart"));
		var options = null;
		var allIpArr = []; //所有的服务器数,例如服务器1,服务器2,
		var filData = {
			linkNum: {
				name: '在线数',
				data: [],
				rowData: []
			},
			currentInBytes: {
				name: '当前进站',
				data: [],
				rowData: []
			},
			currentOutBytes: {
				name: '当前出站',
				data: [],
				rowData: []
			},
		}
		var xAxisArr = []; //X时间轴
		this.jsonApiService.http("log/logtraffic.html", 'type=0').subscribe(result => {
			var len = result.data.length;
			if(len < 2) {
				return;
			}
			//			var ipStr=result.data[10].ip;
			this.totalInNum = this.getFlowunit(result.data[len - 1].totalInBytes);
			this.totalOutNum = this.getFlowunit(result.data[len - 1].totalOutBytes);
			for(var i = 0; i < len; i++) {
				//				if(ipStr.length<result.data[i].ip.length){
				//					ipStr=result.data[i].ip
				//				}
				xAxisArr.push(result.data[i].createTime);
				for(let item in filData) {
					filData[item].rowData.push(result.data[i][item]);
					if(item == 'linkNum') {
						filData[item].data.push(result.data[i][item]);
					} else {
						var value = result.data[i][item];
						value = common.twoDecimal(value / 1024); //单位kb
						filData[item].data.push(value);
					}
				}
			}
			//			this.flowIpNum=ipStr.split(',');
			var brokenlineArr = []; //所有的折线数据
			for(let item in filData) {
				if(filData[item].data.length > 1) {
					var obj = {
						name: filData[item].name,
						type: 'line',
						borderWidth: 5,
						data: filData[item].data,
					}
					brokenlineArr.push(obj);
				}
			}
			options = {
				title: {},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross' //十字星	
					},
					formatter: function(params) {
						var res = '';
						var len = params.length;
						var dataIndex = params[0].dataIndex;
						for(var i = 0; i < len; i++) {
							for(let item in filData) {
								if(params[i].seriesName == filData[item].name) {
									var val = filData[item].data[dataIndex];
									if(params[i].seriesName !== '在线数') {
										val = val + 'KB';
										res = res + params[i].marker + params[i].seriesName + ':' + val + '</br>'
									} else {
										res = res + params[i].name + '</br>' + params[i].marker + params[i].seriesName + ':' + val + '</br>'
									}
								}
							}
						}
						return res;
					}
				},
				grid: {
					top: '12',
					left: '22',
					right: '32',
					bottom: '22',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: xAxisArr,
				},
				yAxis: [yAxiWeight],
				series: brokenlineArr
			};
			if(options && typeof options === "object") {
				flowChart.setOption(options, true);
				$(window).resize(flowChart.resize);
			}
			var that = this;
			var timingData = function() {
				//定时获取数据函数
				that.jsonApiService.http2("log/logtraffic.html", 'type=1').subscribe(result => {
					var maxLen = options.xAxis.data.length;
					that.totalInNum = that.getFlowunit(result.data.totalInBytes);
					that.totalOutNum = that.getFlowunit(result.data.totalOutBytes);
					options.xAxis.data.push(result.data.createTime);
					for(let item in filData) {
						filData[item].rowData.push(result.data[item]);
						if(item == 'linkNum') {
							filData[item].data.push(result.data[item]);
						} else {
							var value = result.data[item];
							value = common.twoDecimal(value / 1024); //单位kb
							filData[item].data.push(value);
						}
					}
					flowChart.setOption(options);
				})
			}
			this.chartTimer = setInterval(timingData, 10000);
		})
	}
	//离开页面,关闭所有定时器
	ngOnDestroy() {
		window.clearInterval(this.chartTimer);
	}
	//用户统计类型
	timeTypeUserChange(val) {
		this.timeTypeUser = val;
		this.initUserChart();
	}
	//用户时间范围change回调
	timeRangeUserChange() {
		if(!(this.timeRangeUser > 0)) {
			this.jsonApiService.message('请输入大于0的数字查询')
			return
		}
		this.initUserChart();
	}
	//API统计类型
	timeTypeAPIChange(val) {
		this.timeTypeAPI = val;
		this.initApiChart();
	}
	//API时间范围change回调
	timeRangeAPIChange() {
		if(!(this.timeRangeAPI > 0)) {
			this.jsonApiService.message('请输入大于0的数字查询')
			return
		}
		this.initApiChart();
	}
	//流量统计类型
	timeTypeFlowChange(val) {
		this.timeTypeFlow = val;
		this.initFlowsChart();
	}
	//流量时间范围change回调
	timeRangeFlowChange() {
		if(!(this.timeRangeFlow > 0)) {
			this.jsonApiService.message('请输入大于0的数字查询')
			return
		}
		this.initFlowsChart();
	}
	//流量统计
	initFlowsChart() {
		let url: string = '',
			barX: any[] = [],
			linkNumY: any[] = [],
			totalInBytesY: any[] = [],
			totalOutBytesY: any[] = [];
		let chart = echarts.init(document.getElementById('flowMap'));
		let fillData = [{
			name: '链接数',
			type: 'line',
			data: linkNumY
		}, {
			name: '总进站',
			type: 'line',
			data: totalInBytesY
		}, {
			name: '总出站',
			type: 'line',
			data: totalOutBytesY
		}]
		let option = {
			title: {
				//				text:'API接口排名TOP5数据',
				x: 'center',
				top: 6,
				textStyle: {
					fontSize: 14,

				}
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross'
				},
				formatter: function(params) {
					var res = '';
					var len = params.length;
					var dataIndex = params[0].dataIndex;
					for(var i = 0; i < len; i++) {
						for(let item in fillData) {
							if(params[i].seriesName == fillData[item].name) {
								if(params[i].seriesName !== '链接数') {
									var val = fillData[item].data[dataIndex];
									val = val + 'MB';
									res = res + params[i].marker + params[i].seriesName + ':' + val + '</br>'
								} else {
									var val = fillData[item].data[dataIndex];
									res = res + params[i].name + '</br>' + params[i].marker + params[i].seriesName + ':' + val + '</br>'
								}
							}
						}
					}
					return res;
				}
			},
			grid: {
				top: '12',
				left: '22',
				right: '32',
				bottom: '22',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				data: barX,
				axisTick: {
					alignWithLabel: true
				}
			}],
			yAxis: [{
				type: 'value'
			}],
			series: fillData,
		};
		chart.clear();
		chart.setOption(option);
		let request = "state=" + Number(this.timeTypeFlow) + "&X=" + parseInt(this.timeRangeFlow + '');
		this.jsonApiService.http('trafficFlowShow/queryTrafficFlowList.html', request).subscribe(data => {
			if(data.success) {
				if(!data.data) {
					this.jsonApiService.message('流量数据统计为空');
					return
				}
				var result = data.data;
				for(let item in result) {
					var temItem = item.split(' ');
					var lisItem = item.split(':');
					if(this.timeTypeFlow === '0') {
						barX.push(lisItem[0] + '时');
					} else if(this.timeTypeFlow === '1') {
						barX.push(temItem[0]);
					}
					result[item].totalInBytes = common.twoDecimal(result[item].totalInBytes / 1024 / 1024);
					result[item].totalOutBytes = common.twoDecimal(result[item].totalOutBytes / 1024 / 1024);
					linkNumY.push(result[item].linkNum);
					totalInBytesY.push(result[item].totalInBytes);
					totalOutBytesY.push(result[item].totalOutBytes);
				}
				chart.setOption({
					xAxis: [{
						data: barX
					}],
					series: fillData
				});
				$(window).resize(chart.resize);
			} else {
				//				this.jsonApiService.message(data.message);
				$(window).resize(chart.resize);
			}
		})
	}
	//用户接口调用统计
	initUserChart() {
		let url: string = '',
			barX: any[] = [],
			legendData: any[] = [],
			seriesData: any[] = [];
		let chart = echarts.init(document.getElementById('userMap'));
		let option = {
			title: {
				//				text:'用户接口使用排名TOP5',
				x: 'center',
				top: 6,
				textStyle: {
					fontSize: 14,
				}
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross'
				}
			},
			grid: {
				top: '12',
				left: '22',
				right: '32',
				bottom: '22',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				data: barX,
				axisTick: {
					alignWithLabel: true
				}
			}],
			yAxis: [{
				type: 'value'
			}],
			series: seriesData,
		};
		chart.clear();
		chart.setOption(option);
		let request = "state=" + Number(this.timeTypeUser) + "&X=" + parseInt(this.timeRangeUser + '');
		this.jsonApiService.http('apishow/queryUserList.html', request).subscribe(data => {
			if(data.success) {
				if(!data.data) {
					this.jsonApiService.message('用户数据统计为空');
					return
				}
				var result = data.data;
				for(let item of result.nameList) {
					var obj = {
						name: item,
						type: "line",
						data: []
					}
					seriesData.push(obj);
					//					legendData.push(item);
				}
				for(let item in result.resultList) {
					var temItem = item.split(' ');
					var lisItem = item.split(':');
					if(this.timeTypeUser === '0') {
						barX.push(lisItem[0] + '时');
					} else if(this.timeTypeUser === '1') {
						barX.push(temItem[0]);
					}
					for(let lis of result.resultList[item]) {
						for(let k = 0; k < seriesData.length; k++) {
							if(seriesData[k].name === lis.name) {
								seriesData[k].data.push(lis.count)
							}
						}
					}
				}
				chart.setOption({
					//					legend:{data:legendData},
					xAxis: [{
						data: barX
					}],
					series: seriesData
				});
				$(window).resize(chart.resize);
			} else {
				//				this.jsonApiService.message(data.message);
				$(window).resize(chart.resize);
			}
		})
	}
	//API接口调用统计
	initApiChart() {
		let url: string = '',
			barX: any[] = [],
			legendData: any[] = [],
			seriesData: any[] = [];
		let chart = echarts.init(document.getElementById('apiMap'));
		let option = {
			title: {
				//				text:'API调用排名TOP5统计',
				top: 6,
				textStyle: {
					fontSize: 14,
				}
			},
			//		    legend: {
			//		    	top:'10',
			//		        data:legendData
			//		   	},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross'
				}
			},
			grid: {
				top: '12',
				left: '22',
				right: '32',
				bottom: '22',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				data: barX,
				axisTick: {
					alignWithLabel: true
				}
			}],
			yAxis: [{
				type: 'value'
			}],
			series: seriesData,
		};
		chart.clear();
		chart.setOption(option);
		let request = "state=" + Number(this.timeTypeAPI) + "&X=" + parseInt(this.timeRangeAPI + '');
		this.jsonApiService.http('apishow/queryApiList.html', request).subscribe(data => {
			if(data.success) {
				if(!data.data) {
					this.jsonApiService.message('api数据统计为空');
					return
				}
				var result = data.data;
				for(let item of result.nameList) {
					var obj = {
						name: item,
						type: "line",
						data: []
					}
					seriesData.push(obj);
					//					legendData.push(item);
				}
				for(let item in result.resultList) {
					var temItem = item.split(' ');
					var lisItem = item.split(':');
					if(this.timeTypeAPI === '0') {
						barX.push(lisItem[0] + '时');
					} else if(this.timeTypeAPI === '1') {
						barX.push(temItem[0]);
					}
					for(let lis of result.resultList[item]) {
						for(let k = 0; k < seriesData.length; k++) {
							if(seriesData[k].name === lis.apiName) {
								seriesData[k].data.push(lis.count)
							}
						}
					}
				}
				chart.setOption({
					//					legend:{data:legendData},
					xAxis: [{
						data: barX
					}],
					series: seriesData
				});
				$(window).resize(chart.resize);
			} else {
				//				this.jsonApiService.message(data.message);
				$(window).resize(chart.resize);
			}
		})
	}
	//get当天api数据调用次数
	initTodayApi() {
		if(!this.baseDataHome) return;
		this.jsonApiService.http('log/countApi.html', null).subscribe(data => {
			if(data.success) {
				let temData = data.data;
				this.baseData.api0 = common.numberFormat(temData[0]);
				this.baseData.api1 = common.numberFormat(temData[1]);
				this.baseData.api2 = common.numberFormat(temData[2]);
			} else {
				this.jsonApiService.message(data.message);
			}
		})
	}
	//当天总流量
	initTotalData() {
		if(!this.baseDataHome) return;
		this.jsonApiService.http('mainstat/totalofelementfordb.html', null).subscribe(data => {
			if(data.success) {
				this.baseData.totalData = common.numberFormat(data.data);
			} else {
				this.jsonApiService.message(data.message);
			}
		})
	}
	//海螺数据统计
	ininHaiLuoData() {
		if(!this.baseDataHome) return;
		this.jsonApiService.http('mainstat/dataAnalyzeForHailuo.html', null).subscribe(data => {
			if(data.success) {
				this.baseData.totalCount = common.numberFormat(data.data.totalCount);
				this.baseData.totalDistance = common.numberFormat(data.data.totalDistance);
				this.baseData.totalWeight = common.numberFormat(data.data.totalWeight);
			} else {
				this.jsonApiService.message(data.message);
			}
		})
	}
	// 微信小程序访问量统计
	initWxProgramData(){
		if(!this.baseDataHome) return;
		this.jsonApiService.http('appointmentRepairCar/appletsStatistics.html', null).subscribe(data => {
			if(data.success) {
				this.baseData.registCount = common.numberFormat(data.data.totalUser);
				this.baseData.viewCount = common.numberFormat(data.data.totalVisit);
			} else {
				this.jsonApiService.message(data.message);
			}
		})
	}
	initBtn() {
		var that = this;
		this.btnData = JSON.parse(decodeURIComponent(localStorage.getItem('cargpsw_desktop')));
		if(!this.btnData) return;
		for(let item of this.btnData) {
			if(item.sourceKey === "desktop:online" && item.parentId) {this.onlineHome = true;}
			if(item.sourceKey === "desktop:api" && item.parentId) {this.apiHome = true;}
			if(item.sourceKey === "desktop:baseData" && item.parentId) {this.baseDataHome = true;}
			if(item.sourceKey === "desktop:welcome" && item.parentId) {this.welcomeHome = true;}
		}
		if(this.baseDataHome) {
			this.initTodayApi();
			this.initTotalData();
			this.ininHaiLuoData();
			this.initWxProgramData(); // 小程序访问人数

			if(that.homeTapValue != '5' && that.homeTapValue != '6'){
				setTimeout(function(){
					that.initEcharts(1);
				},100)
			}
		} else {
			$('#carDataModule').removeClass('col-md-4').addClass('col-md-6');
			$('#carMapModule').removeClass('col-md-4').addClass('col-md-6');
		}
		if(this.apiHome) {
			this.showFlowChartView();
			this.initApiChart(); //API统计
			this.initUserChart(); //用户API调用统计
			this.initFlowsChart(); //链接流量统计
			this.initFlowChart(); //在线流量统计
		}
		if(this.onlineHome) {
			this.initCarMap(); //车辆在线/离线统计
			this.initOnline(); //车辆分布统计
		}
	}
	ngOnInit() {
		var that = this;
		this.initBtn();
		this.initYear();
		this.initMonth();
		
	}



	/*
	*  新改编的柱状图
	*
	*
	*
	*
	*

	*/

	homeTapValue: any='6';
	selectYear: any; //当前选中年
	selectMonth: any; //当前选中月
	selectMonthList: any = [1,2,3,4,5,6,7,8,9,10,11,12];
	selectYearList: any = [];
	isPrevious: boolean = false; //是否禁止跳转上一页
	isNext: boolean = false; //是否禁止跳转下一页
	histogramChart: any;
	homeTap(value){
		var that = this;
		that.homeTapValue = value;
		that.initYear(); //恢复当年
		that.initMonth(); //恢复当月
		if(value == 1 || value == 3){
			that.isNext = true;
			that.isPrevious = false;

			setTimeout(function(){
				that.initEcharts(1);
			},100)
		}else if(value == 2 || value == 4){
			if(that.selectMonth == 12){
				that.isNext = true;
				that.isPrevious = false;
			}else if(that.selectMonth == 1){
				that.isNext = false;
				that.isPrevious = true;
			}else{
				that.isNext = false;
				that.isPrevious = false;
			}

			setTimeout(function(){
				that.initEcharts(2);
			},100)
		}
	}

	//获取当前年
	initYear() {
		this.selectYearList = [];
		this.selectYear = new Date().getFullYear();
		
		let lastYear = 2018;
		for(let i=0;i< this.selectYear - lastYear;i++){
			var nowYear = this.selectYear - i;
			this.selectYearList.push(nowYear)
		}
		this.selectYearList.push(lastYear);

		this.isNext = true;
	}

	//获取当前月
	initMonth() {
		this.selectMonth = new Date().getMonth() + 1;
	}

	jumpPage(type){
		//跳转上一页还是下一页
		let nowYear = new Date().getFullYear();
		if(type == 1){
			if(this.isPrevious){
				return;
			}
			this.isNext = false;
			if(this.homeTapValue == 1 || this.homeTapValue == 3){
				this.selectYear = parseInt(this.selectYear) - 1;
				if(this.selectYear == 2018){
					this.isPrevious = true;
					this.isNext = false;
				}
				this.initEcharts(1)
			}
			if(this.homeTapValue == 2 || this.homeTapValue == 4){
				this.selectMonth = parseInt(this.selectMonth) - 1;
				if(this.selectMonth == 1){
					this.isPrevious = true;
					this.isNext = false;
				}
				this.initEcharts(2)
			}
		}else if(type == 2){
			if(this.isNext){
				return;
			}
			this.isPrevious = false;
			if(this.homeTapValue == 1 || this.homeTapValue == 3){
				this.selectYear = parseInt(this.selectYear) + 1;
				if(this.selectYear == nowYear){
					this.isNext = true;
					this.isPrevious = false;
				}
				this.initEcharts(1)
			}
			if(this.homeTapValue == 2 || this.homeTapValue == 4){
				this.selectMonth = parseInt(this.selectMonth) + 1;
				if(this.selectMonth == 12){
					this.isNext = true;
					this.isPrevious = false;
				}
				this.initEcharts(2)
			}
		}
	}

	chooseYear(value){
		//选择年份
		if(this.homeTapValue == 1 || this.homeTapValue == 3){
			if(value == 2021){
				this.isNext = true;
				this.isPrevious = false;
			}else if(value == 2018){
				this.isPrevious = true;
				this.isNext = false;
			}else{
				this.isPrevious = false;
				this.isNext = false;
			}
			this.initEcharts(1);
		}else{
			this.initEcharts(2);
		}

		
	}
	chooseMonth(value){
		//选择月份
		if(this.homeTapValue == 2 || this.homeTapValue == 4){
			if(value == 1){
				this.isNext = false;
				this.isPrevious = true;
			}else if(value == 12){
				this.isPrevious = false;
				this.isNext = true;
			}else{
				this.isPrevious = false;
				this.isNext = false;
			}
		}

		this.initEcharts(2);
	}

	//返回今年或者今月
	jumpBackYear(){
		this.isNext = true;
		this.isPrevious = false;
		this.selectYear = new Date().getFullYear();
		this.initEcharts(1);
	}

	jumpBackMonth(){
		this.selectMonth = new Date().getMonth() + 1;
		this.selectYear = new Date().getFullYear();
		if(this.selectMonth == 1){
			this.isNext = false;
			this.isPrevious = true;
		}else if(this.selectMonth == 12){
			this.isNext = true;
			this.isPrevious = false;
		}else{
			this.isNext = false;
			this.isPrevious = false;
		}

		this.initEcharts(2);
	}

	//获取指定年月的天数
	getDaysInOneMonth(year, month){
		month = parseInt(month, 10);
		var day= new Date(year, month, 0);  
		return day.getDate();  
	}
	//获取指定年月的天数 并生成数组
	getEvryDay(year,month){
		var day;
		if(month == 2){
			day=this.getDaysInOneMonth(year,month);
			var day2 = this.getDaysInOneMonth(year-1,month);

			if(day2 > day){
				day = day2;
			}
		}else{
			day=this.getDaysInOneMonth(year,month);
		}
		
		var dayArry=[];
		for (var k = 1; k <= day; k++) {
			// var kObj = k+ '日'
			dayArry.push(k);
		}
		return dayArry;
	}

	//柱状图显示的配置
	createEcharts(type,year,month){
		var title,legendData,xAxisData,sigeTit,itemStyle1,itemStyle2,legendDataName;
		var lastYear = year-1;
		if(this.homeTapValue == 1){
			title = '月安装量同比';
			sigeTit = '安装量/台';
			legendData = [lastYear+'年',year+'年','月同比增长率'];
			legendDataName = {
				'月同比增长率': false
			};
			xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
			itemStyle1 = {
				normal: {
					label: {
						show: true,  //开启显示
						position: 'top',  //在上方显示
						textStyle: {  //数值样式
							color: 'black',
							fontSize: 10
						},
					},
					color: '#3075b4'
				}
			};
			itemStyle2 = {
				normal: {
					label: {
						show: true,  //开启显示
						position: 'top',  //在上方显示
						textStyle: {  //数值样式
							color: 'black',
							fontSize: 10
						},
					},
					color: '#c45a20'
				}
			};
		}else if(this.homeTapValue == 2){
			title = '日安装量同比';
			sigeTit = '安装量/台';
			legendData = [lastYear+'年' + month + '月',year+'年' + month + '月','日同比增长率'];
			legendDataName = {
				'日同比增长率': false
			};
			xAxisData = this.getEvryDay(year,month);
			itemStyle1 = {
				normal: {
					label: {
						show: true,  //开启显示
						position: 'top',  //在上方显示
						textStyle: {  //数值样式
							color: 'black',
							fontSize: 10
						},
						formatter: function(params) {
							if (params.value > 0) {
							   return params.value;
							} else {
							   return ' ';
							}
						},
					},
					color: '#3075b4'
				}
			};
			itemStyle2 = {
				normal: {
					label: {
						show: true,  //开启显示
						position: 'top',  //在上方显示
						textStyle: {  //数值样式
							color: 'black',
							fontSize: 10
						},
						formatter: function(params) {
							if (params.value > 0) {
							   return params.value;
							} else {
							   return ' ';
							}
						},
					},
					color: '#c45a20'
				}
			};
		}else if(this.homeTapValue == 3){
			title = '年安装量同比';
			sigeTit = '设备总量/台';
			legendData = [lastYear+'年',year+'年','月同比增长率'];
			legendDataName = {
				'月同比增长率': false
			};
			xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
			itemStyle1 = {
				normal: {
					label: {
						show: true,  //开启显示
						position: 'top',  //在上方显示
						rotate: 60,
						distance: 20, 
						verticalAlign: 'middle',
						textStyle: {  //数值样式
							color: 'black',
							fontSize: 10
						},
						formatter: function(params) {
							if (params.value > 0) {
							   return params.value;
							} else {
							   return ' ';
							}
						},
					},
					color: '#3075b4'
				}
			};
			itemStyle2 = {
				normal: {
					label: {
						show: true,  //开启显示
						position: 'top',  //在上方显示
						rotate: 60,
						verticalAlign: 'middle',
						distance: 20, 
						textStyle: {  //数值样式
							color: 'black',
							fontSize: 10
						},
						formatter: function(params) {
							if (params.value > 0) {
							   return params.value;
							} else {
							   return ' ';
							}
						},
					},
					color: '#c45a20'
				}
			};
		}else if(this.homeTapValue == 4){
			title = '设备总量日同比';
			sigeTit = '设备总量/台';
			legendData = [lastYear+'年' + month + '月',year+'年' + month + '月','日同比增长率'];
			legendDataName = {
				'日同比增长率': false
			};
			xAxisData = this.getEvryDay(year,month);
			itemStyle1 = {
				normal: {
					label: {
						show: false,  //开启显示
						position: 'top',  //在上方显示
						textStyle: {  //数值样式
							color: 'black',
							fontSize: 10
						},
						formatter: function(params) {
							if (params.value > 0) {
							   return params.value;
							} else {
							   return ' ';
							}
						},
					},
					color: '#3075b4'
				}
			};
			itemStyle2 = {
				normal: {
					label: {
						show: false,  //开启显示
						position: 'top',  //在上方显示
						textStyle: {  //数值样式
							color: 'black',
							fontSize: 10
						},
						formatter: function(params) {
							if (params.value > 0) {
							   return params.value;
							} else {
							   return ' ';
							}
						},
					},
					color: '#c45a20'
				}
			};
		}
		var option = {
			title: {
				left: 'center',
				text: title,
				top: 10
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					crossStyle: {
						color: '#999'
					}
				},
			},
			legend: {
				data: legendData,
				bottom: '10',
				selected: legendDataName
			},
			xAxis: [
				{
					type: 'category',
					data: xAxisData,
					axisPointer: {
						type: 'shadow'
					},
					axisLabel:{
						interval: 0
					}
				}
			],
			yAxis: [
				{
					type: 'value',
					name: sigeTit,
					// min: 0,
					// max: maxNum,
					// interval: interval,
					axisLabel: {
						formatter: '{value}'
					}
				},
				{
					type: 'value',
					name: '增长率/%',
					// min: -10,
					// max: 20,
					// interval: 5,
					axisLabel: {
						formatter: '{value}'
					},
					splitLine:{
						show:false
			        },
				}
			],
			series: [
				{
					name: legendData[0],
					type: 'bar',
					data: this.preTotalCountList,
					itemStyle: itemStyle1,
					barGap: '1%',
				},
				{
					name: legendData[1],
					type: 'bar',
					data: this.currTotalCountList,
					itemStyle: itemStyle2,
					barGap: '1%',
				},
				{
					name: legendData[2],
					type: 'line',
					yAxisIndex: 1,
					data: this.yoyGrowthRateList,
					itemStyle: {
						normal: {
							color: '#1fc359'
						}
					},
				}
			],
			grid: {
                top: 50,
				right: 40,
				bottom: 60,
                left: 50,
            },
		};
		return option;
	}

	currTotalCountList: any = []; //上一年度
	preTotalCountList: any = []; //下一年度
	yoyGrowthRateList: any = []; //上一年度

	//柱状图显示
	initEcharts(type) {
		//创建绘图
		this.histogramChart = echarts.init(document.getElementById("histogramCharts"));
		var parm = {
			type: this.homeTapValue,
			year: this.selectYear,
			month: this.selectMonth
		}
		this.jsonApiService.http_obj('car/statisticsInstallDeviceCountByType.html', parm).subscribe((result) => {
			var resultAttr = result.data;
			var currTotalCountAttr = [],preTotalCountAttr = [],yoyGrowthRateAttr = [];
			for(let i=0;i< resultAttr.length;i++){
				currTotalCountAttr.push(resultAttr[i].currTotalCount);
				preTotalCountAttr.push(resultAttr[i].preTotalCount);
				if(resultAttr[i].yoyGrowthRate == ""){
					resultAttr[i].yoyGrowthRate = "null"
				}
				yoyGrowthRateAttr.push(resultAttr[i].yoyGrowthRate);
			}
			this.currTotalCountList = JSON.parse(JSON.stringify(currTotalCountAttr));
			this.preTotalCountList = JSON.parse(JSON.stringify(preTotalCountAttr));
			this.yoyGrowthRateList = JSON.parse(JSON.stringify(yoyGrowthRateAttr));
			var option = this.createEcharts(type,this.selectYear,this.selectMonth);

			this.histogramChart.setOption(option,true);
			$(window).resize(this.histogramChart.resize);
		})

	}
}